<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>MapStore 2 Example: LayerTree</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <link rel="shortcut icon" href="../home/img/favicon.ico" type="image/x-icon">
        <script src="https://maps.google.com/maps/api/js?v=3"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.10/proj4.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>

        <style>
        html, body, #container, #map, .fill {
            position:absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .fill-debug {
            position:absolute;
            left:0;
            right: 300px;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .hidden {
            display: none !important;
        }
        .noUi-target,
        .noUi-target * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -ms-touch-action: none;
          touch-action: none;
        -ms-user-select: none;
        -moz-user-select: none;
        -moz-box-sizing: border-box;
          box-sizing: border-box;
        }
        .noUi-target {
          position: relative;
          direction: ltr;
        }
        .noUi-base {
          width: 100%;
          height: 100%;
          position: relative;
          z-index: 1; /* Fix 401 */
        }
        .noUi-origin {
          position: absolute;
          right: 0;
          top: 0;
          left: 0;
          bottom: 0;
        }
        .noUi-handle {
          position: relative;
          z-index: 1;
        }
        .noUi-stacking .noUi-handle {
        /* This class is applied to the lower origin when
           its values is > 50%. */
          z-index: 10;
        }
        .noUi-state-tap .noUi-origin {
        -webkit-transition: left 0.3s, top 0.3s;
          transition: left 0.3s, top 0.3s;
        }
        .noUi-state-drag * {
          cursor: inherit !important;
        }

        /* Painting and performance;
         * Browsers can paint handles in their own layer.
         */
        .noUi-base {
          -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
        }

        /* Slider size and handle placement;
         */
        .noUi-horizontal {
          height: 18px;
        }
        .noUi-horizontal .noUi-handle {
          width: 34px;
          height: 28px;
          left: -17px;
          top: -6px;
        }
        .noUi-vertical {
          width: 18px;
        }
        .noUi-vertical .noUi-handle {
          width: 28px;
          height: 34px;
          left: -6px;
          top: -17px;
        }

        /* Styling;
         */
        .noUi-background {
          background: #FAFAFA;
          box-shadow: inset 0 1px 1px #f0f0f0;
        }
        .noUi-connect {
          background: #3FB8AF;
          box-shadow: inset 0 0 3px rgba(51,51,51,0.45);
        -webkit-transition: background 450ms;
          transition: background 450ms;
        }
        .noUi-origin {
          border-radius: 2px;
        }
        .noUi-target {
          border-radius: 4px;
          border: 1px solid #D3D3D3;
          box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
        }
        .noUi-target.noUi-connect {
          box-shadow: inset 0 0 3px rgba(51,51,51,0.45), 0 3px 6px -5px #BBB;
        }

        /* Handles and cursors;
         */
        .noUi-draggable {
          cursor: w-resize;
        }
        .noUi-vertical .noUi-draggable {
          cursor: n-resize;
        }
        .noUi-handle {
          border: 1px solid #D9D9D9;
          border-radius: 3px;
          background: #FFF;
          cursor: default;
          box-shadow: inset 0 0 1px #FFF,
                inset 0 1px 7px #EBEBEB,
                0 3px 6px -3px #BBB;
        }
        .noUi-active {
          box-shadow: inset 0 0 1px #FFF,
                inset 0 1px 7px #DDD,
                0 3px 6px -3px #BBB;
        }

        /* Handle stripes;
         */
        .noUi-handle:before,
        .noUi-handle:after {
          content: "";
          display: block;
          position: absolute;
          height: 14px;
          width: 1px;
          background: #E8E7E6;
          left: 14px;
          top: 6px;
        }
        .noUi-handle:after {
          left: 17px;
        }
        .noUi-vertical .noUi-handle:before,
        .noUi-vertical .noUi-handle:after {
          width: 14px;
          height: 1px;
          left: 6px;
          top: 14px;
        }
        .noUi-vertical .noUi-handle:after {
          top: 17px;
        }

        /* Disabled state;
         */
        [disabled].noUi-connect,
        [disabled] .noUi-connect {
          background: #B8B8B8;
        }
        [disabled].noUi-origin,
        [disabled] .noUi-handle {
          cursor: not-allowed;
        }

        .noUi-tooltip {
          display: block;
          position: absolute;
          border: 1px solid #D9D9D9;
          border-radius: 3px;
          background: #fff;
          padding: 5px;
          left: -9px;
          text-align: center;
          width: 50px;
        }

        .noUi-handle-lower .noUi-tooltip {
          top: -32px;
        }

        .noUi-handle-upper .noUi-tooltip {
          bottom: -32px;
        }

        /* Pips
         */
        .noUi-pips,
        .noUi-pips * {
        -moz-box-sizing: border-box;
          box-sizing: border-box;
        }
        .noUi-pips {
          position: absolute;
          color: #999;
        }

        /* Values;
         *
         */
        .noUi-value {
          width: 40px;
          position: absolute;
          text-align: center;
        }
        .noUi-value-sub {
          color: #ccc;
          font-size: 10px;
        }

        /* Markings;
         *
         */
        .noUi-marker {
          position: absolute;
          background: #CCC;
        }
        .noUi-marker-sub {
          background: #AAA;
        }
        .noUi-marker-large {
          background: #AAA;
        }

        /* Horizontal layout;
         *
         */
        .noUi-pips-horizontal {
          padding: 10px 0;
          height: 50px;
          top: 100%;
          left: 0;
          width: 100%;
        }
        .noUi-value-horizontal {
          margin-left: -20px;
          padding-top: 20px;
        }
        .noUi-value-horizontal.noUi-value-sub {
          padding-top: 15px;
        }

        .noUi-marker-horizontal.noUi-marker {
          margin-left: -1px;
          width: 2px;
          height: 5px;
        }
        .noUi-marker-horizontal.noUi-marker-sub {
          height: 10px;
        }
        .noUi-marker-horizontal.noUi-marker-large {
          height: 15px;
        }

        /* Vertical layout;
         *
         */
        .noUi-pips-vertical {
          padding: 0 10px;
          height: 100%;
          top: 0;
          left: 100%;
        }
        .noUi-value-vertical {
          width: 15px;
          margin-left: 20px;
          margin-top: -5px;
        }

        .noUi-marker-vertical.noUi-marker {
          width: 5px;
          height: 2px;
          margin-top: -1px;
        }
        .noUi-marker-vertical.noUi-marker-sub {
          width: 10px;
        }
        .noUi-marker-vertical.noUi-marker-large {
          width: 15px;
        }

        .Sortable {
          position: relative;
          display: block;
          overflow: visible;
          -webkit-user-select: none;
          -moz-user-select: none;
          user-select: none;
        }

        .SortableItem {
          cursor: -webkit-grab; cursor:-moz-grab; cursor: grab;
        }

        .SortableItem.is-dragging {
          cursor: move;
          position: absolute;
          z-index: 1688;
          background-color: rgba(218, 218, 218, 0.8);;
          border: 1px dashed #8E8E8E;
          border-radius: 5px;
          box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.28);
        }

        .SortableItem.is-placeholder {
          border: 1px dashed #8E8E8E;
          border-radius: 5px;
        }

        .SortableItem.is-undraggable {
          cursor: not-allowed;
        }
        </style>
    </head>
    <body class="ms2">
        <div id="container"></div>
        <script src="../../dist/layertree.js"></script>
    </body>
</html>
